<html>
<head>
  <meta charset="UTF-8">
  <link href="./static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <link href="./static/assets/global/css/components.css" rel="stylesheet" type="text/css"/>
  <link href="./static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
  <script src="./static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
  <script src="./gethost.js" type="text/javascript"></script>
</head>

<body>
<div class="content">
  <h3 class="form-title">商品列表</h3>
  <div class="table-responsive">
    <table class="table">
      <thead>
      <tr>
        <th>商品名</th>
        <th>商品图片</th>
        <th>商品描述</th>
        <th>商品价格</th>
        <th>商品库存</th>
        <th>商品销量</th>
      </tr>
      </thead>
      <tbody id="container">
      </tbody>
    </table>
  </div>
</div>

</body>

<script>
  // 定义全局商品数组信息
  var g_itemList = [];

  jQuery(document).ready(function () {
    $.ajax({
      type:"GET",
      url:"http://"+g_host+"/item/list",
      xhrFields: {withCredentials: true},
      success:function (data) {
        if (data.status == "success") {
          // alert("获取商品信息成功");
          g_itemList = data.data;
          reloadDom();
        }else {
          alert("获取商品信息失败，原因："+data.data.errMsg);
        }
      },
      error:function (data) {
        alert("获取商品信息失败，原因："+data.responseText);
      }
    })
  })

  function reloadDom() {
    for (var i = 0; i < g_itemList.length; i ++){
      var itemVO = g_itemList[i];
      console.log(itemVO.title)
      var dom = "<tr data-id='"+ itemVO.id +"' id='itemDetail"+ itemVO.id +"'><td>"+ itemVO.title +"</td><td><img style='width: 100px;height: auto' src='"+ itemVO.imgUrl +"'></td><td>"+ itemVO.description +"</td><td>"+ itemVO.price +"</td><td>"+ itemVO.stock +"</td><td>"+ itemVO.sales +"</td></tr>";
      $("#container").append($(dom));

      $("#itemDetail"+itemVO.id).on("click",function (e) {
        window.location.href="getitem.html?id="+$(this).data("id");
      })
    }
  }
</script>
</html>